<script setup>
import { UploadPsdService } from '@/api/user';
import { ElMessage } from 'element-plus';
import { ref, reactive } from 'vue'
import router from '@/router';
import { EmailFindPsdService } from '@/api/email';

const form = reactive({
    new_psd: '',
    rePassword: '',
    email: '',
    code: ''
})

const checkRePsd = (rule, value, cb) => {
    if (value === form.new_psd) {
        return cb();
    }
    //手机号不合法
    cb(new Error('两次输入的密码不同！'));
}

const rules = {
    email: [
        { required: true, message: '邮箱不可为空！', trigger: 'blur' },
        { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
    ],
    code: [{ required: true, message: '验证码不可为空！', trigger: 'blur' }],
    new_psd: [{ required: true, message: '密码不可为空！', trigger: 'blur' }],
    rePassword: [
        { required: true, message: '确认密码不可为空！', trigger: 'blur' },
        { validator: checkRePsd, trigger: ['blur', 'change'] }
    ]
}

const isShow = ref(0)

const time = ref(60)
let timer = null

const countdown = () => {
    if (timer) {
        clearTimeout(timer);
    }
    timer = setTimeout(() => {
        if (time.value > 0) {
            time.value--; // 时间减1  
            countdown(); // 递归调用，继续倒计时  
        } else {
            clearTimeout(timer); // 倒计时结束，清除定时器  
            // 在这里可以添加倒计时结束后的处理逻辑  
            isShow.value = 2
            time.value = 60
        }
    }, 1000); // 每秒更新一次时间  
}

const validation = async () => {
    if (form.email === null || form.email === '') {
        ElMessage.error('邮箱不可为空')
    } else {
        await EmailFindPsdService(form.email)
        ElMessage.info("验证码发送成功")
        isShow.value = 1
        countdown()
    }
}

const submit = async () => {
    await UploadPsdService(form)
    ElMessage.success("密码更新成功")
    router.push('/login')
}


</script>


<template>
    <div class="register-bg">
        <div class="big-box">
            <div class="back_login">
                <router-link :to="{ name: 'login' }"><el-icon>
                        <DArrowLeft />
                    </el-icon>返回登录
                </router-link>
            </div>

            <div class="form-big-box">
                <div class="title">找 回 密 码</div>

                <el-form :model="form" :rules="rules" label-width="80px" id="my-form">
                    <el-form-item prop="email" label="邮箱">
                        <el-input v-model="form.email" placeholder="输入您的邮箱" clearable class="my-input">
                        </el-input>
                    </el-form-item>
                    <el-form-item prop="code" label="验证码">
                        <el-input v-model="form.code" placeholder="输入邮箱验证码" clearable class="my-input">

                            <template #suffix>
                                <el-button :type="primary" text style="border: none;color: blue;" v-if="isShow === 0"
                                    @click="validation">获取验证码</el-button>
                                <el-button :type="primary" text style="border: none;color: gray;" v-if="isShow === 1"
                                    disabled>{{ time }}秒</el-button>
                                <el-button :type="primary" text style="border: none;color: blue;" v-if="isShow === 2"
                                    @click="validation">重新获取</el-button>
                            </template>
                        </el-input>
                    </el-form-item>
                    <el-form-item prop="new_psd" label="密码">
                        <el-input type="password" v-model="form.new_psd" placeholder="输入密码" clearable class="my-input"/>
                    </el-form-item>
                    <el-form-item prop="rePassword" label="确认密码">
                        <el-input type="password" v-model="form.rePassword" placeholder="再次输入密码" clearable class="my-input"/>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submit" class="submit-button">提
                            交</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>

<style>
.register-bg {
    background-image: url('../../public/background3.png');
    background-size: cover;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

.big-box {
    background-color: rgb(240, 248, 255, 0.85);
    width: 700px;
    height: 60vh;
    position: absolute;
    margin-top: 15vh;
    margin-left: calc(50% - 350px);
    overflow: hidden;
    border-radius: 20px;
}

.form-big-box {
    width: 400px;
    margin: 0 auto;
    /* margin-top: px; */
    /* margin-left: -80px; */
    /* margin-right: 80px; */
}

.back_login {
    padding-top: 30px;
    padding-left: 30px;
}

.title {
    color: #014369;
    font-size: 30px;
    text-align: center;
    padding: 30px 0 30px 0;
}

.my-input {
    height: 40px;
}

#my-form {
    margin-left: -80px;
}

.submit-button {
    width: 100%;
    padding: 20px;
    font-size: 20px;
    margin-top: 20px;
}
</style>